<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">菜单管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home_console">首页</a>
          <a><cite>菜单管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            所属应用：<select id="menu_clients" lay-filter="menu_clients"></select>
            &emsp;搜索：<input id="menus-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="menus-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
            <button id="menus-btn-expand" class="layui-btn">全部展开</button>
            <button id="menus-btn-fold" class="layui-btn">全部折叠</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="menus-table" lay-filter="menus-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="menus-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'treetable'],function () {
    let table = layui.table;
    let layer = layui.layer;
    let admin = layui.admin;
    let treetable = layui.treetable;
    let config = layui.config;
    let form = layui.form;
    
    // 渲染表格
    var renderTable = function (param) {
        if (param) {
            param.access_token = config.getToken().access_token;
        } else {
            param = {
                access_token: config.getToken().access_token
            };
        }
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'id',
            treePidName: 'pid',
            elem: '#menus-table',
            url: config.base_server + 'api-user/menus/findAlls',
            where: param,
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'title', minWidth: 200, title: '菜单名称'},
                {field: 'url', title: '菜单url'},
                {field: 'html', title: '菜单path'},
                {field: 'css',  align: 'center', title: '样式'},
                {field: 'menuSort', width: 80, align: 'center', title: '排序号'},
                {
                    field: 'type', width: 80, align: 'center', templet: function (d) {
                        if (d.type === 2) {
                            return '<span class="layui-badge layui-bg-gray">资源</span>';
                        }
                        if (d.pid === -1) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '类型'
                },
                {templet: '#menus-state', width: 120, align: 'center', title: '操作'}
            ]]
        });
    };
    renderTable({tenantId: config.clientId});
    
    // 获取应用列表
    layer.load(2);
    admin.req('api-uaa/clients/all', {}, function (data) {
        layer.closeAll('loading');
        if (0 === data.resp_code) {
            let selected = false;
            $.each(data.datas,function(index,item){
                if (config.clientId === item.clientId) {
                    selected = true;
                } else {
                    selected = false;
                }
                //往下拉菜单里添加元素
                $('#menu_clients').append(new Option(item.clientName, item.clientId, false, selected));
            })
            form.render();
        } else {
            layer.msg(data.resp_msg, {icon: 2, time: 500});
        }
    }, 'GET');
    
    // 工具条点击事件
    table.on('tool(menus-table)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === 'edit') { // 修改
            showEditModel(data);
        } else if (layEvent === 'del') {
            layer.confirm('确定删除此菜单吗？', function () {
                layer.load(2);
                let tenantId = $('#menu_clients').val();
                admin.req('api-user/menus/'+obj.data.id+'?tenantId='+tenantId, {}, function (data) {
                    layer.closeAll('loading');
                    if (0 === data.resp_code) {
                        layer.msg(data.resp_msg, {icon: 1, time: 500});
                        renderTable({tenantId: tenantId});
                    } else {
                        layer.msg(data.resp_msg, {icon: 2, time: 500});
                    }
                }, 'DELETE');
            });
        }
    });
    
    // 显示编辑弹窗
    var showEditModel = function (data) {
        let tenantId = $('#menu_clients').val();
        let title = data ? '修改菜单' : '添加菜单';
        if (data){
            data.type = data.type.toString();
            data.hidden = data.hidden.toString();
        } else {
            data = {};
        }
        data.tenantId = tenantId;
        admin.putTempData('t_menus', data);

        admin.popupCenter({
            title: title,
            path: 'pages/system/menus_form.html',
            finish: function () {
                renderTable({tenantId: tenantId});
            }
        });
    };
    
    // 添加按钮点击事件
    $('#menus-btn-add').click(function () {
        showEditModel();
    });
    
    // 搜索按钮点击事件
    $('#menus-btn-search').click(function () {
        var keyword = $('#menus-edit-search').val();
        var searchCount = 0;
        $('#menus-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
            $(this).css('background-color', 'transparent');
            var text = $(this).text();
            if (keyword !== '' && text.indexOf(keyword) >= 0) {
                $(this).css('background-color', 'rgba(250,230,160,0.5)');
                if (searchCount === 0) {
                    $('.layui-tab-item.layui-show').stop(true);
                    $('.layui-tab-item.layui-show').animate({scrollTop: $(this).offset().top - 150}, 500);
                }
                searchCount++;
            }
        });
        if (keyword !== '' && searchCount === 0) {
            layer.msg("没有匹配结果", {icon: 5, time: 500});
        } else {
            treetable.expandAll('#menus-table');
        }
    });
    
    $('#menus-btn-expand').click(function () {
        treetable.expandAll('#menus-table');
    });

    $('#menus-btn-fold').click(function () {
        treetable.foldAll('#menus-table');
    });

    // 应用下拉框点击事件
    form.on('select(menu_clients)', function(data){
        renderTable({tenantId: data.value});
    });
});
</script>